<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul,
      li {
        list-style: none;
      }

      a {
        text-decoration: none;
      }

      nav {
        width: 100%;
        border-bottom: 3px solid red;
      }

      nav .as {
        width: 1226px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px;
      }

      /* ！！！！ */
      .herder {
        width: 1226px;
        height: 20px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        padding: 30px 0px;
        border-bottom: 1px solid red;
      }

      .herder span {
      }

      .herder span:nth-child(2) {
        width: 380px;
      }
      .herder span:nth-child(3) {
        width: 80px;
      }
      .herder span:nth-child(4) {
        width: 90px;
        padding: 5px;
        text-align: center;
      }
      .herder span:nth-child(5) {
        width: 100px;
      }
      .box {
        width: 1226px;
        margin: 0 auto;
        /* background-color: aquamarine; */
      }

      .box li {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-around;
        padding: 20px 0;
        align-items: center;
        border-top: 1px solid #000;
      }

      .box li span:nth-child(2) {
        width: 380px;
        margin-left: 20px;
        position: relative;
      }

      .box li img {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        position: absolute;
        left: -90px;
        top: -30px;
      }

      .box li span:nth-child(4) {
        display: flex;
      }

      .box li span:nth-child(4) a {
        width: 20px;
        height: 20px;
        background-color: rgb(147, 147, 147);
        color: #000000;
        text-align: center;
        line-height: 20px;
        padding: 5px;
        font-size: 18px;
      }

      .box li span:nth-child(4) input {
        width: 30px;
        height: 20px;
        border: none;
        outline: none;
        padding: 5px;
      }
      .pri {
        width: 100px;
      }
      .dpri {
        width: 80px;
        text-align: center;
      }
      .total {
        width: 1226px;
        height: 50px;
        background-color: rgba(247, 247, 247, 0.506);
        padding: 20px 0px;
        /* position: fixed;
        bottom: 0;
        left: 10%; */
        margin: 0 auto;
      }
      .total button {
        width: 150px;
        height: 50px;
        border: none;
        color: #fff;
        background-color: red;
        border-radius: 10px;
        font-size: 20px;
        margin-right: 50px;
        float: right;
      }
      .total-num {
        height: 50px;
        line-height: 50px;
        float: right;
        margin-right: 30px;
        font-size: 25px;
      }
      .model {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.285);
        position: fixed;
        top: 0;
        left: 0;

        display: none;
      }
      .ewm {
        width: 400px;
        height: 400px;
        background-color: rgb(113, 113, 113);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: relative;
      }
      .ewm img {
        width: 200px;
        height: 300px;
      }

      .ewm a {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background-color: #fff;
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>
  </head>

  <body>
    <nav>
      <div class="as">
        <h1>我的购物车</h1>
        <p class="dz">
          <a href="./reg.html">注册</a><span>|</span
          ><a href="./login.html">登录</a>
        </p>
      </div>
    </nav>
    <div class="herder">
      <span><input type="checkbox" class="chkAll" />全选</span>
      <span>商品名称</span>
      <span>单价</span>
      <span>数量</span>
      <span>小计</span>
      <span>操作</span>
    </div>
    <ul class="box">
      <!-- <li>
        <span><input type="checkbox" />全选</span>

        <span><img src="./imgae/logo.png" alt="" />商品名称</span>
        <span>单价</span>
        <span><a>-</a><input type="text" /><a>+</a></span>
        <span>小计</span>
        <span>操作</span>
      </li> -->
    </ul>
    <div class="total">
      <button class="btnP">结算</button>
      <div class="total-num">￥：<span class="to">0</span></div>
    </div>
    <div class="model">
      <div class="ewm">
        <img src="./imgae/ewm.jpg" alt="" />
        <span>请微信扫码支付</span>
        <span class="wc">完成支付</span>
        <a class="xx">X</a>
      </div>
    </div>
    <script src="./js/axios.js"></script>
    <script>
      let URL = "http://localhost:8888";

      axios.defaults.headers.common["Authorization"] =
        localStorage.getItem("token");
      axios.defaults.headers.post["Content-Type"] =
        "application/x-www-form-urlencoded";
      let box = document.querySelector(".box");
      let dz = document.querySelector(".dz");
      function setNum(pid, num) {
        axios
          .post(URL + "/cart/number", {
            id: parseInt(localStorage.getItem("uid")),
            goodsId: pid,
            number: parseInt(num),
          })
          .then((s) => {
            console.log(s);
          });
      }

      function cartList() {
        //判断用户是否登录，显示用户名
        axios
          .get(URL + "/users/info", {
            params: {
              id: parseInt(localStorage.getItem("uid")),
            },
          })
          .then((d) => {
            console.log(d);
            if (d.data.code == 1) {
              dz.innerHTML = `<span>欢迎${d.data.info.username}</span>　<span>退出</span>　<a href="./list.html">再买点</a>`;
            } else {
              dz.innerHTML = ` <a href="./reg.html">注册</a><span>|</span
          ><a href="./login.html">登录</a>`;
            }
          });
        axios
          .get(URL + "/cart/list", {
            params: { id: parseInt(localStorage.getItem("uid")) },
          })
          .then((r) => {
            if (r.data.code == 1) {
              console.log(r, r.data.cart);
              if (r.data.cart.length > 0) {
                //判断一下获取的cart列表有没有数据
                let html = "";
                r.data.cart.forEach((v) => {
                  html += `<li>
        <span><input type="checkbox" class="chki" /></span>

        <span><img src="${v.img_small_logo}" alt="" />${v.title}</span>
        <span class="dpri">${v.current_price}</span>
        <span><a class="lf">-</a><input class="ipt" type="text" value="${
          v.cart_number
        }" /><a class="ri">+</a></span>
        <span class="pri">${Math.round(v.cart_number * v.current_price)}</span>
        <span class="cz" data-id="${v.goods_id}">X</span>
      </li>`;
                });
                box.innerHTML = html;
                //
                //

                let lfs = document.querySelectorAll(".lf");
                let ris = document.querySelectorAll(".ri");
                let ipts = document.querySelectorAll(".ipt");
                let pris = document.querySelectorAll(".pri");
                let dpris = document.querySelectorAll(".dpri");
                let czs = document.querySelectorAll(".cz");
                let chkAll = document.querySelector(".chkAll");
                let chks = document.querySelectorAll(".chki");
                let to = document.querySelector(".to");
                let btnP = document.querySelector(".btnP");
                let model = document.querySelector(".model");
                let wc = document.querySelector(".wc");
                let xx = document.querySelector(".xx");
                // 结算
                btnP.onclick = function () {
                  console.log(to.innerText);
                  if (to.innerText > 0) {
                    model.style.display = "block";
                    model.style.display = "flex";
                    model.style.alignItems = "center";
                    model.style.justifyContent = "space-around";
                  } else {
                    alert("你要空气吗？");
                  }
                };
                wc.onclick = function () {
                  model.style.display = "none";
                };
                xx.onclick = function () {
                  model.style.display = "none";
                };
                // 计算总价
                function totalP() {
                  let pris = document.querySelectorAll(".pri");
                  let to = document.querySelector(".to");

                  let p = 0;
                  pris.forEach((a) => {
                    p += Number(a.innerText);
                  });
                  to.innerText = p;
                }
                //

                // /*  */
                // 减操作
                lfs.forEach((l, i) => {
                  l.onclick = () => {
                    if (ipts[i].value > 1) {
                      ipts[i].value -= 1;
                      console.log(ipts[i].value, dpris[i].innerText);
                      pris[i].innerText = Math.round(
                        ipts[i].value * dpris[i].innerText
                      );
                      console.log(ipts[i].value);
                      if (chkAll.checked) {
                        totalP();
                      }
                      setNum(czs[i].getAttribute("data-id"), ipts[i].value);
                    }
                  };
                });
                // 加操作
                ris.forEach((l, i) => {
                  l.onclick = () => {
                    //可以做一个限购，就不做了
                    ipts[i].value = +ipts[i].value + 1;
                    pris[i].innerText = Math.round(
                      ipts[i].value * dpris[i].innerText
                    );
                    if (chkAll.checked) {
                      totalP();
                    }
                    setNum(czs[i].getAttribute("data-id"), ipts[i].value);
                  };
                });
                // X 删除数据
                czs.forEach((b, i) => {
                  b.onclick = function () {
                    let r = confirm("确认删除？");
                    if (r == true) {
                      axios
                        .get(URL + "/cart/remove", {
                          params: {
                            id: parseInt(localStorage.getItem("uid")),
                            goodsId: b.getAttribute("data-id"),
                          },
                        })
                        .then((f) => {
                          console.log(f);
                          if (f.data.code == 1) {
                            czs[i].parentNode.remove();
                            console.log("111");
                            totalP();
                          }

                          /*
                      到此
                        */
                        });
                    } else {
                    }
                  };
                });

                // 全选

                let flag = false;
                chkAll.onclick = function () {
                  totalP();
                  chks.forEach((c) => {
                    c.checked = chkAll.checked;
                  });
                };
                // 单选
                chks.forEach((item) => {
                  item.onclick = function () {
                    let ched = document.querySelectorAll(".chki:checked");

                    console.log(ched);
                    let np = 0;
                    chks.forEach((n, i) => {
                      if (n.checked) {
                        np += Number(pris[i].innerText);
                      }
                    });
                    to.innerText = np;
                    if (ched.length == chks.length) {
                      chkAll.checked = true;
                    } else {
                      chkAll.checked = false;
                    }
                  };
                });
              } else {
                box.innerHTML = "<h1>购物车空空~~</h1>";
              }
            } else {
              alert("未登录，请先登录");
              location.href = "./login.html";
            }
          });
      }
      cartList();
    </script>
  </body>
</html>
